<template>
  <div class="directorys-container">
    <div class="container">
      <el-card shadow="never">
        <div slot="header" v-if="$route.query.id">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{
              isRouteName ? '目录管理' : '标签管理'
            }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 搜索 表单-->
        <el-row>
          <el-col :span="18">
            <el-form
              ref="directorysForm"
              :model="directorysForm"
              label-width="80px"
            >
              <el-row>
                <el-col :span="7">
                  <el-form-item
                    :label="isRouteName ? '目录名称' : '标签名称'"
                    size="small"
                  >
                    <el-input v-model="directorysForm.directoryName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="状态" size="small">
                    <el-select
                      v-model="directorysForm.state"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="item.value"
                        :value="item.id"
                        v-for="item in baseApi.status"
                        :key="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" style="margin-left: 10px">
                  <el-button size="small" @click="clear">清除</el-button>
                  <el-button type="primary" size="small" @click="search"
                    >搜索</el-button
                  >
                </el-col>
              </el-row>
            </el-form>
          </el-col>
          <el-col :span="6" align="right">
            <el-button
              type="text"
              icon="el-icon-back"
              @click="$router.push('/subjects/list')"
              v-if="$route.query.id"
              >返回学科</el-button
            >
            <el-button
              size="small"
              type="success"
              icon="el-icon-edit"
              @click="addDirectory"
              >{{ isRouteName ? '新增目录' : '新增标签' }}</el-button
            >
          </el-col>
        </el-row>

        <!-- 提示 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>

        <!-- 数据 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column label="序号" type="index" width="50px">
          </el-table-column>
          <el-table-column label="所属学科" prop="subjectName">
          </el-table-column>
          <el-table-column
            :label="isRouteName ? '目录名称' : '标签名称'"
            :prop="isRouteName ? 'directoryName' : 'tagName'"
          >
          </el-table-column>
          <el-table-column label="创建者" prop="username"> </el-table-column>
          <el-table-column label="创建时间">
            <template v-slot="{ row }">
              {{ row.addDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}
            </template>
          </el-table-column>
          <el-table-column
            label="面试题数量"
            prop="totals"
            v-if="routeName === 'subjects-directorys'"
          >
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="{ row }">
              {{ row.state | filterData }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <div class="operation">
                <el-link
                  type="primary"
                  :underline="false"
                  v-if="row.state == 1"
                  @click="changeState(row)"
                  >禁用</el-link
                >
                <el-link
                  type="primary"
                  :underline="false"
                  v-else
                  @click="changeState(row)"
                  >启用</el-link
                >
                <el-link
                  :type="row.state == 1 ? 'info' : 'primary'"
                  :disabled="row.state == 1"
                  :underline="false"
                  @click="updataDirecory(row)"
                  >修改</el-link
                >
                <el-link
                  :type="row.state == 1 ? 'info' : 'primary'"
                  :disabled="row.state == 1"
                  :underline="false"
                  @click="deleteDirecory(row.id)"
                  >删除</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->

        <!-- 分页 -->
        <el-row type="flex" justify="end" v-if="$route.query.id === undefined">
          <div class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :total="pagination.total"
              :current-page="pagination.currentPage"
              :page-size="pagination.currentSize"
              :page-sizes="[5, 10, 20, 50]"
              layout=" prev, pager, next, sizes,jumper"
            >
            </el-pagination>
          </div>
        </el-row>

        <!-- end -->
      </el-card>
      <!-- 新增弹框 -->
      <Diolog
        :isRouteName="isRouteName"
        :dialogVisible.sync="dialogVisible"
        :dataList="subjectList"
      ></Diolog>
      <!-- 修改弹框 -->
      <UpdateDiolog
        :isRouteName="isRouteName"
        :dialogVisibleUpdate.sync="dialogVisibleUpdate"
        :dataList="subjectList"
        :directoryInfo="directoryInfo"
      ></UpdateDiolog>
    </div>
  </div>
</template>


<script>
import baseApi from '@/api/base/baseApi'
import { list, remove, changeState } from '@/api/hmmm/directorys'
import Diolog from '../components/directorys-add.vue'
import UpdateDiolog from '../components/tags-add.vue'
import {
  list as tagList,
  remove as tagRemove,
  changeState as tagChangeState
} from '@/api/hmmm/tags.js'
import { parseTime } from '@/filters'
import { simple } from '../../api/hmmm/subjects'

export default {
  name: 'DirectoryTag',
  components: {
    Diolog,
    UpdateDiolog
  },
  filters: {
    filterData (val) {
      if (val == 1) {
        return '已启用'
      } else if (val == 0) {
        return '已禁用'
      } else {
        return '未知'
      }
    }
  },
  data () {
    return {
      baseApi,
      parseTime,
      routeName: '',
      isRouteName: false,
      dataList: [],
      subjectList: [],
      tableKey: 0,
      listLoading: true,
      alertText: '',
      total: 0,
      pagination: {
        page: 1,
        pagesize: 10,
        total: 0,
        pageSizes: [5, 10, 20, 50],
        currentPage: 1,
        currentSize: 10
      },
      directorysForm: {
        directoryName: '',
        state: '',
        tagName: ''
      },
      dialogVisible: false,
      dialogVisibleUpdate: false,
      directoryInfo: null
    }
  },
  computed: {},
  methods: {
    // 获取学科列表
    async getSubjectList () {
      try {
        const { data } = await simple()

        this.subjectList = data
      } catch (error) {
        this.$message.error('获取列表失败')
      }
    },
    // 获取列表数据
    async getList () {
      this.listLoading = true
      this.dataList = []
      this.alertText = ''
      if (!this.$route.query.id) {
        if (this.isRouteName) {
          try {
            const {
              data: { items, counts }
            } = await list(this.pagination)
            this.dataList = items
            this.total = counts
            this.pagination.total = counts
          } catch (error) {
            this.listLoading = false
            this.$message.error('列表获取失败')
          }
        } else {
          try {
            const {
              data: { items, counts }
            } = await tagList(this.pagination)
            this.dataList = items
            this.total = counts
            this.pagination.total = counts
          } catch (error) {
            this.listLoading = false
            this.$message.error('列表获取失败')
          }
        }
      } else {
        if (this.isRouteName) {
          try {
            const {
              data: { items, counts }
            } = await list({
              directoryName: this.$route.query.name,
              subjectID: this.$route.query.id
            })
            this.dataList = items
            this.total = counts
            this.pagination.total = counts
          } catch (error) {
            this.listLoading = false
            this.$message.error('列表获取失败')
          }
        } else {
          try {
            const {
              data: { items, counts }
            } = await tagList({
              directoryName: this.$route.query.name,
              subjectID: this.$route.query.id
            })
            this.dataList = items
            this.total = counts
            this.pagination.total = counts
          } catch (error) {
            this.listLoading = false
            this.$message.error('列表获取失败')
          }
        }
      }

      this.alertText = `数据共 ${this.total} 条`
      this.listLoading = false
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.pagination.pagesize = val
      this.getList()
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pagination.page = val
      this.getList()
    },
    // 新增
    addDirectory () {
      this.dialogVisible = true
    },

    // 改变状态
    changeState (row) {
      try {
        if (row.state == 1) {
          if (this.isRouteName) {
            changeState({ id: row.id, state: '0' })
          } else {
            tagChangeState({ id: row.id, state: '0' })
          }
          this.$message.success('已禁用')
        } else {
          if (this.isRouteName) {
            changeState({ id: row.id, state: '1' })
          } else {
            tagChangeState({ id: row.id, state: '1' })
          }
          this.$message.success('已启用')
        }
        this.getList()
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 删除
    deleteDirecory (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (this.isRouteName) {
            await remove({ id })
          } else {
            await tagRemove({ id })
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改
    updataDirecory (row) {
      this.dialogVisibleUpdate = true
      this.directoryInfo = row
    },
    // 清除
    clear () {
      this.directorysForm.directoryName = ''
      this.directorysForm.state = ''
      this.directorysForm.tagName = ''
      this.getList()
    },
    // 搜索
    async search () {
      this.listLoading = true
      this.dataList = []
      this.alertText = ''
      if (this.isRouteName) {
        try {
          const {
            data: { items, counts }
          } = await list(this.directorysForm)

          this.dataList = items
          this.pagination.total = counts
        } catch (error) {
          this.listLoading = false
          this.$message.error('列表获取失败')
        }
      } else {
        try {
          const {
            data: { items, counts }
          } = await tagList(this.pagination)
          this.dataList = items
          this.pagination.total = counts
        } catch (error) {
          this.listLoading = false
          this.$message.error('列表获取失败')
        }
      }

      this.alertText = `数据共 ${this.pagination.total} 条`
      this.listLoading = false
    }
  },
  // 挂载结束
  mounted: function () {},
  // 创建完毕状态
  created () {
    this.routeName = this.$route.name
    if (this.routeName === 'subjects-directorys') {
      this.isRouteName = true
    }
    this.getList()
    this.getSubjectList()
  },
  // 组件更新
  updated: function () {}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.operation .el-link {
  margin-left: 10px;
}
</style>
